HTML5 এ ফর্মের কার্যকারিতা ও ইউজার এক্সপেরিয়েন্স বাড়ানোর জন্য বেশ কিছু নতুন Form Elements এবং Attributes যোগ করা হয়েছে। এগুলো ফর্মের ডাটা ইনপুট ও ভ্যালিডেশন প্রক্রিয়া আরও সহজ এবং কার্যকরী করে তোলে। নিচে HTML5 এর নতুন ফর্ম এলিমেন্ট এবং তাদের ব্যবহার নিয়ে আলোচনা করা হলো।
১. <datalist>
- বর্ণনা:
<datalist>ট্যাগ একটি ইনপুট ফিল্ডের জন্য প্রি-ডিফাইনড অপশনগুলোর একটি তালিকা তৈরি করতে ব্যবহৃত হয়। ইউজাররা যখন ইনপুট ফিল্ডে কিছু টাইপ করে, তখন একটি ড্রপডাউন মেনুতে এই তালিকার অপশনগুলো প্রদর্শিত হয়। - ব্যবহার: ইনপুটে পূর্বনির্ধারিত অপশন দেওয়ার জন্য, যাতে ইউজাররা দ্রুত সিলেক্ট করতে পারে।
উদাহরণ:
<input list="browsers" name="browser" placeholder="Choose a browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
ব্যাখ্যা: এখানে "browsers" নামে একটি <datalist> তৈরি করা হয়েছে, যা ইনপুট ফিল্ডে টাইপ করার সময় সম্ভাব্য অপশনগুলো প্রদর্শন করবে।
২. <output>
- বর্ণনা:
<output>ট্যাগ ফর্মের ডাটা থেকে ফলাফল বা আউটপুট প্রদর্শন করতে ব্যবহৃত হয়। এটি বিশেষ করে ক্যালকুলেশন বা ফর্মুলা প্রয়োগ করে রেজাল্ট দেখানোর জন্য সহায়ক। - ব্যবহার: রিয়েল-টাইম ক্যালকুলেশন বা ফলাফল প্রদর্শন করতে।
উদাহরণ:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>
ব্যাখ্যা: দুটি ইনপুট ফিল্ডের যোগফল <output> ট্যাগে প্রদর্শিত হচ্ছে। ইউজার সংখ্যা ইনপুট করলে, তাৎক্ষণিকভাবে ফলাফল আপডেট হবে।
৩. <progress>
- বর্ণনা:
<progress>ট্যাগ একটি প্রগ্রেস বার তৈরি করতে ব্যবহৃত হয়, যা কাজের সম্পন্ন হওয়ার পরিমাণ বা অগ্রগতি প্রদর্শন করে। - ব্যবহার: লোডিং, ডাউনলোড, বা কোনো প্রক্রিয়া কতটুকু সম্পন্ন হয়েছে তা দেখাতে।
উদাহরণ:
<progress value="70" max="100">70%</progress>
ব্যাখ্যা: এখানে একটি প্রগ্রেস বার তৈরি করা হয়েছে, যা ৭০% সম্পন্ন হয়েছে বলে প্রদর্শিত হবে।
৪. <meter>
- বর্ণনা:
<meter>ট্যাগ একটি মিটার বা গেজ তৈরি করতে ব্যবহৃত হয়, যা একটি নির্দিষ্ট রেঞ্জের মধ্যে কোনো মান বা ভ্যালু প্রদর্শন করে। - ব্যবহার: স্কোর, রেটিং, বা পরিমাণগত মান প্রদর্শন করতে।
উদাহরণ:
<meter value="0.7" min="0" max="1">70%</meter>
ব্যাখ্যা: এখানে একটি মিটার তৈরি করা হয়েছে, যা ০ থেকে ১ এর মধ্যে ০.৭ মান প্রদর্শন করছে, যা ৭০% হিসাবে দেখাবে।
৫. type="color"
- বর্ণনা: HTML5 এ নতুন ইনপুট টাইপ হিসেবে
"color"যোগ করা হয়েছে, যা একটি কালার পিকার তৈরি করে। ইউজার একটি রঙ সিলেক্ট করতে পারে। - ব্যবহার: ইউজারদের ইন্টারফেসে রঙ বেছে নেওয়ার সুবিধা দিতে।
উদাহরণ:
<input type="color" name="favcolor" value="#ff0000">
ব্যাখ্যা: এখানে একটি কালার পিকার ইনপুট তৈরি করা হয়েছে, যা ডিফল্টভাবে লাল রঙ সিলেক্ট করা।
৬. type="date", type="time", এবং type="datetime-local"
- বর্ণনা: HTML5 এ তারিখ এবং সময় ইনপুট করার জন্য নতুন ইনপুট টাইপ যোগ করা হয়েছে।
type="date": কেবলমাত্র তারিখ ইনপুট করার জন্য।type="time": কেবলমাত্র সময় ইনপুট করার জন্য।type="datetime-local": তারিখ এবং সময় একসাথে ইনপুট করার জন্য।
- ব্যবহার: ইভেন্ট, অ্যাপয়েন্টমেন্ট, বা সময়সূচি ইনপুট করতে।
উদাহরণ:
<input type="date" name="event-date">
<input type="time" name="event-time">
<input type="datetime-local" name="meeting">
ব্যাখ্যা: এখানে তিনটি ইনপুট ফিল্ড তৈরি করা হয়েছে, যা ইউজারকে তারিখ, সময়, এবং তারিখসহ সময় ইনপুট করার সুবিধা দেয়।
৭. type="range"
- বর্ণনা:
"range"ইনপুট টাইপ একটি স্লাইডার তৈরি করতে ব্যবহৃত হয়, যেখানে ইউজার একটি নির্দিষ্ট রেঞ্জের মধ্যে মান সিলেক্ট করতে পারে। - ব্যবহার: ভলিউম কন্ট্রোল, উজ্জ্বলতা সেটিং, বা অন্যান্য মান নির্ধারণ করতে।
উদাহরণ:
<input type="range" name="volume" min="0" max="100" value="50">
ব্যাখ্যা: এখানে একটি স্লাইডার তৈরি করা হয়েছে, যেখানে ইউজার ভলিউম ০ থেকে ১০০ এর মধ্যে নিয়ন্ত্রণ করতে পারে।
৮. type="search"
- বর্ণনা:
"search"ইনপুট টাইপ একটি সার্চ বক্স তৈরি করতে ব্যবহৃত হয়। এটি সার্চ ফিল্ডের জন্য বিশেষভাবে ডিজাইন করা, যেখানে ক্লিয়ার বাটন অন্তর্ভুক্ত থাকে। - ব্যবহার: সার্চ ফিল্ড তৈরি করতে, যেখানে ইউজার কীবোর্ডে টাইপ করে কিছু খুঁজে পেতে পারেন।
উদাহরণ:
<input type="search" name="search" placeholder="Search...">
ব্যাখ্যা: এখানে একটি সার্চ ইনপুট ফিল্ড তৈরি করা হয়েছে, যা সার্চ করার জন্য ইউজারকে নির্দেশ করে।
৯. type="month" এবং type="week"
- বর্ণনা: HTML5 এ নির্দিষ্ট মাস বা সপ্তাহ ইনপুট করার জন্য
"month"এবং"week"ইনপুট টাইপ যোগ করা হয়েছে।type="month": মাস এবং বছর ইনপুট করতে।type="week": নির্দিষ্ট সপ্তাহ ইনপুট করতে।
- ব্যবহার: মাসিক বা সাপ্তাহিক ডেটা ইনপুট করতে।
উদাহরণ:
<input type="month" name="billing-month">
<input type="week" name="schedule-week">
ব্যাখ্যা: এখানে দুটি ইনপুট ফিল্ড তৈরি করা হয়েছে, একটি মাস ইনপুটের জন্য এবং আরেকটি সপ্তাহ ইনপুটের জন্য।
সারসংক্ষেপ
HTML5 এ নতুন ফর্ম এলিমেন্ট এবং ইনপুট টাইপগুলো ফর্ম ডিজাইন এবং ইউজার ইন্টারফেসের কার্যকারিতা ও সহজতা বাড়ানোর জন্য খুবই সহায়ক। এগুলো ফর্মের ইনপুট এবং ডাটা ভ্যালিডেশন প্রক্রিয়াকে আরও উন্নত করে, এবং ইউজার এক্সপেরিয়েন্স বাড়াতে সাহায্য করে।
| ফর্ম এলিমেন্ট | বর্ণনা | উদাহরণ |
|---|---|---|
<datalist> | ইনপুট ফিল্ডের জন্য অপশনের তালিকা | ব্রাউজার সিলেক্টর |
<output> | ফর্মের আউটপুট প্রদর্শন | ক্যালকুলেটর ফলাফল |
<progress> | প্রগ্রেস বার | লোডিং স্টেট |
<meter> | গেজ বা মিটার | রেটিং স্কেল |
"color" ইনপুট | কালার পিকার | রঙ বেছে নেওয়া |
এই নতুন এলিমেন্ট এবং ইনপুট টাইপগুলো HTML5 ফর্মকে আরও ফিচার-সমৃদ্ধ এবং রেস্পন্সিভ করে তোলে, যা ওয়েব ডেভেলপমেন্টে নতুন সুযোগ সৃষ্টি করে।
Read more
